import { useMemo } from 'react'
import { useSelector } from 'react-redux'
import { Tabs, Progress, Card, Comment, Avatar, Carousel, Timeline, Input, Button } from "antd"
import { ReadOutlined, FileProtectOutlined, ShareAltOutlined } from '@ant-design/icons'
import './style.scss'

const { TabPane } = Tabs

export default () => {
  const { userinfo } = useSelector(state => state.user)

  const role = useMemo(() => {
    if (userinfo.roles) {
      return userinfo.roles[0]
    }
    return ''
  }, [userinfo])

  return (
    <div className="personal">
      <div className="personal-info">
        <Card
          title="About me"
          style={{ width: '100%', height: '100%' }}
        >
          <div className="userInfo">
            <div className="avatar">
              <span>{role === 'admin' ? 'Hello admin' : 'Hello editor'}</span>
              <img src={require('../../assets/avatar.gif')} alt="" />
            </div>
            <div className="username">{role === 'admin' ? 'Super Admin' : 'Super Editor'}</div>
            <div className="role">{role === 'admin' ? 'Admin' : 'Editor'}</div>
          </div>
          <div className="education">
            <div className="title">
              <ReadOutlined />
              <b>Education</b>
            </div>
            <div className="content">JS in Computer Science from the University of Technology</div>
          </div>
          <div className="skills">
            <div className="title">
              <FileProtectOutlined />
              <b>Skills</b>
            </div>
            <div className="content">
              <h3>React</h3>
              <Progress percent={70} />
              <h3>JavaScript</h3>
              <Progress percent={18} />
              <h3>Css</h3>
              <Progress percent={12} />
              <h3>ESLint</h3>
              <Progress percent={100} />
            </div>
          </div>
        </Card>
      </div>
      <div className="personal-related">
        <Tabs defaultActiveKey="1">
          <TabPane tab="Activity" key="1">
            <Comment
              actions={[<span><ShareAltOutlined /> Share</span>, <span>Like</span>]}
              author={<a>Iron Man</a>}
              avatar={<Avatar src={require('../../assets/Iron Man.jpg')} alt="" />}
              content={
                <p>
                  Lorem ipsum represents a long-held tradition for designers, typographers and the like. Some people hate it and argue for its demise, but others ignore the hate as they create awesome tools to help create filler text for everyone from bacon lovers to Charlie Sheen fans.
                </p>
              }
              datetime={<span>Shared publicly - 7:30 PM today</span>}
            />
            <Comment
              actions={[<span><ShareAltOutlined /> Share</span>, <span>Like</span>]}
              author={<a>Captain American</a>}
              avatar={<Avatar src={require('../../assets/Captain American.jpg')} alt="" />}
              content={
                <p>
                  Lorem ipsum represents a long-held tradition for designers, typographers and the like. Some people hate it and argue for its demise, but others ignore the hate as they create awesome tools to help create filler text for everyone from bacon lovers to Charlie Sheen fans.
                </p>
              }
              datetime={<span>Sent you a message - yesterday</span>}
            />
            <Comment
              actions={[<span><ShareAltOutlined /> Share</span>, <span>Like</span>]}
              author={<a>Spider Man</a>}
              avatar={<Avatar src={require('../../assets/Spider Man.jpg')} alt="" />}
              content={
                <Carousel className="Carousel" autoplay>
                  <div>
                    <img src={require('../../assets/banner1.jpg')} alt='' />
                  </div>
                  <div>
                    <img src={require('../../assets/banner2.jpg')} alt='' />
                  </div>
                  <div>
                    <img src={require('../../assets/banner3.jpg')} alt='' />
                  </div>
                </Carousel>
              }
              datetime={<span>Posted 4 photos - 2 days ago</span>}
            />

          </TabPane>
          <TabPane tab="Timeline" key="2">
            <Timeline style={{ paddingLeft: '20px' }}>
              <Timeline.Item color="gray">
                <p>2022/6/16</p>
                <Card style={{ width: '100%' }}>
                  <h3>Update Github template</h3>
                  <p>PanJiaChen committed 2022/6/16 17:25</p>
                </Card>
              </Timeline.Item>

              <Timeline.Item color="gray">
                <p>2022/6/17</p>
                <Card style={{ width: '100%' }}>
                  <h3>Update Github template</h3>
                  <p>PanJiaChen committed 2022/6/17 17:25</p>
                </Card>
              </Timeline.Item>
              <Timeline.Item color="gray">
                <p>2022/6/18</p>
                <Card style={{ width: '100%' }}>
                  <h3>Build Template</h3>
                  <p>PanJiaChen committed 2022/6/18 17:25</p>
                </Card>
              </Timeline.Item>
              <Timeline.Item color="gray">
                <p>2022/6/19</p>
                <Card style={{ width: '100%' }}>
                  <h3>Release New Version</h3>
                  <p>PanJiaChen committed 2022/6/19 17:25</p>
                </Card>
              </Timeline.Item>
            </Timeline>
          </TabPane>
          <TabPane tab="Account" key="3">
            <h3>Name</h3>
            <Input placeholder={role === 'admin' ? 'Super Admin' : 'Super Editor'} />
            <h3 style={{ marginTop: "20px" }}>Email</h3>
            <Input placeholder={role === 'admin' ? 'admin@test.com' : 'editor@test.com'} />
            <Button type="primary" style={{ marginTop: "20px" }}>Update</Button>
          </TabPane>
        </Tabs>
      </div>
    </div>
  )
}

